<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>综合能源算法管理平台-碳排管理</title>
  <link rel="stylesheet" href="./css/base.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/manage.css">
</head>

<body>
  <a href="./login.html" class="back"></a>

  <!-- 公共头部 -->
  <div class="header">
    <a href="./testing.html">调优监测</a>
    <a href="./effect.html">调优效果</a>
    <a href="./manage.html" class="active">碳排管理</a>
    <a href="#">产品单耗</a>
  </div>

  <!-- 主体内容 -->
  <div class="main">
    <div class="left">
      <div class="box">
        <div class="title"></div>
        <div class="box1">
          <select name="" id="" class="select">
            <option value="">厂房1</option>
            <option value="">厂房2</option>
            <option value="">厂房3</option>
            <option value="">厂房4</option>
            <option value="">厂房5</option>
            <option value="">厂房6</option>
            <option value="">厂房7</option>
            <option value="">厂房8</option>
            <option value="">厂房9</option>
            <option value="">厂房10</option>
          </select>
          <div class="content">
            <div>
              <img src="./images/编组 2@2x 2.png" alt="">
              <div class="row">
                <div class="left">日排放总量</div>
                <div class="right"><span>48.00</span> 吨</div>
              </div>
            </div>
            <div>
              <img src="./images/编组 2@2x (1).png" alt="">
              <div class="row">
                <div class="left">月排放总量</div>
                <div class="right"><span>1073.14</span> 吨</div>
              </div>
            </div>
            <div>
              <img src="./images/编组 2@2x (2).png" alt="">
              <div class="row">
                <div class="left">年排放总量</div>
                <div class="right"><span>11355.36</span> 吨</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="title"></div>
        <div class="box2"></div>
      </div>
      <div class="box">
        <div class="title"></div>
        <div class="box3"></div>
      </div>
    </div>

    <div class="center">
      <div class="item">
        <div>园区当年总碳排</div>
        <div><span>102198.26</span> 吨</div>
      </div>
      <div class="item">
        <div>园区当月总碳排</div>
        <div><span>9658.24</span> 吨</div>
      </div>
      <div class="item">
        <div>园区当日总碳排</div>
        <div><span>431.99</span> 吨</div>
      </div>
    </div>

    <div class="right">
      <div class="box">
        <div class="title"></div>
        <div class="box4"></div>
      </div>
      <div class="box">
        <div class="title"></div>
        <div class="box5"></div>
      </div>
      <div class="box">
        <div class="title"></div>
        <div class="box6"></div>
      </div>
    </div>
  </div>
  <!-- 底部图片 -->
  <img src="./images/footer@2x.png" class="footer" alt="">

  <script src="./lib/echarts.js"></script>
  <script src="./js/data.js"></script>
  <script>
    // 文本大小缩放
    // 改变图表字体大小
    function transformFontSize(fontsize) {
      // 获取屏幕宽度
      const width = document.body.scrollWidth;
      const ratio = width / 1920;
      return parseInt(fontsize * ratio);
    }

    // 月碳排放分析-----------------------------------------
    let myChart2 = echarts.init(document.querySelector('.box2'))
    let option2 = {
      textStyle: {
        fontSize: transformFontSize(16),
      },
      xAxis: {
        type: 'category',
        data: MonthlyCarbonEmissionAnalysisX,
        boundaryGap: false,
        axisLabel: {
          fontSize: transformFontSize(16)
        },
      },
      grid: {
        left: '10%',
        top: '18%',
        bottom: '12%',
        right: '5%'
      },
      legend: {
        itemGap: 5,
        itemWidth: 10,
        itemHeight: 0,
        top: 5,
        right: 0,
        textStyle: {
          color: '#ccc',
          fontSize: transformFontSize(16),
        }
      },
      tooltip: {
        trigger: 'axis',
        appendToBody: true,
        position: function (point, params, dom, rect, size) {
          // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
          // 提示框位置
          let x = 0; // x坐标位置
          let y = 0; // y坐标位置

          // 当前鼠标位置
          let pointX = point[0];
          let pointY = point[1];

          // 外层div大小
          // var viewWidth = size.viewSize[0];
          // var viewHeight = size.viewSize[1];

          // 提示框大小
          let boxWidth = size.contentSize[0];
          let boxHeight = size.contentSize[1];

          // boxWidth > pointX 说明鼠标左边放不下提示框
          if (boxWidth > pointX) {
            x = 5;
          } else { // 左边放的下
            x = pointX - boxWidth;
          }

          // boxHeight > pointY 说明鼠标上边放不下提示框
          if (boxHeight > pointY) {
            y = 5;
          } else { // 上边放得下
            y = pointY - boxHeight;
          }

          return [x, y];
        },

        formatter: function (params) {
          let result
          // 自定义显示内容
          // params 是一个包含当前数据信息的数组或对象
          if (params.length <= 2) {
            result = params[0].name + '<br/>';
            params.forEach(function (item) {
              result += item.seriesName + ': ' + item.value + '<br/>';
            });
          } else {
            result = params[0].name + '<br/>' + params[0].seriesName + ': ' + params[0].value + '<br/>';
            result += params[1].seriesName + ': ' + params[1].value + '<br/>'
          }
          return result;
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '万吨',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(16)
          },
        },
      ],
      series: [
        {
          data: MonthlyCarbonEmissionAnalysisY1,
          type: 'line',
          color: '#37A7E8',
          name: '上月',
          smooth: true,
          yAxisIndex: 0,
          symbol: 'none',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#2b74ff' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(40,75,144,0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        },
        {
          data: MonthlyCarbonEmissionAnalysisY2,
          type: 'line',
          color: '#D2C143',
          name: '当月',
          symbol: 'none',
          smooth: true,
          yAxisIndex: 0,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#D2C143' // 0% 处的颜色
              }, {
                offset: 1, color: 'rgba(245,201,28,0)' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          }
        },
        {
          data: MonthlyCarbonEmissionAnalysisY3,
          type: 'line',
          symbol: 'none',
          color: '#D2C143',
          name: '当月预测',
          smooth: true,
          yAxisIndex: 0,
          lineStyle: {
            type: 'dotted'
          }
        }
      ]
    }

    // 判断当前的月份，把YearCarbonEmissionsAll中的数据动态添加到数组中
    let now111 = new Date()
    let month111 = now111.getMonth()
    YearCarbonEmissionsY = YearCarbonEmissionsAll.slice(0, month111)
    YearCarbonEmissionsY.push(parseInt(YearCarbonEmissionsAll[month111+1]/30*new Date().getDate()))
    console.log(YearCarbonEmissionsY)

    // 当年碳排放趋势-------------------------
    let myChart3 = echarts.init(document.querySelector('.box3'))
    let option3 = {
      textStyle: {
        fontSize: transformFontSize(16),
      },
      xAxis: {
        type: 'category',
        data: YearCarbonEmissionsX,
        // boundaryGap: false,
        axisLabel: {
          fontSize: transformFontSize(16)
        }
      },
      grid: {
        left: '15%',
        top: '18%',
        bottom: '12%',
        right: '5%'
      },
      tooltip: {
        trigger: 'axis',
        appendToBody: true,
        position: function (point, params, dom, rect, size) {
          // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
          // 提示框位置
          let x = 0; // x坐标位置
          let y = 0; // y坐标位置

          // 当前鼠标位置
          let pointX = point[0];
          let pointY = point[1];

          // 外层div大小
          // var viewWidth = size.viewSize[0];
          // var viewHeight = size.viewSize[1];

          // 提示框大小
          let boxWidth = size.contentSize[0];
          let boxHeight = size.contentSize[1];

          // boxWidth > pointX 说明鼠标左边放不下提示框
          if (boxWidth > pointX) {
            x = 5;
          } else { // 左边放的下
            x = pointX - boxWidth;
          }

          // boxHeight > pointY 说明鼠标上边放不下提示框
          if (boxHeight > pointY) {
            y = 5;
          } else { // 上边放得下
            y = pointY - boxHeight;
          }

          return [x, y];
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '万吨',
          axisLine: {
            show: true
          },
          splitLine: {
            lineStyle: {
              color: ['#2079A0']
            }
          },
          axisLabel: {
            fontSize: transformFontSize(16)
          },
        },
      ],
      series: [
        {
          data: YearCarbonEmissionsY,
          type: 'bar',
          itemStyle: {
            borderRadius: [8, 8, 0, 0] // 这里设置圆角的大小
          },
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 1, color: '#1679d1' // 0% 处的颜色
            }, {
              offset: 0, color: '#60f8ff' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          name: '当月碳排放',
        },
      ]
    }


    // 各厂房碳排放排行榜
    let myChart4 = echarts.init(document.querySelector('.box4'))
    let option4 = {
      title: {
        text: '单位：万吨',
        right: 0,
        textStyle: {
          fontSize: transformFontSize(12),
          color: '#ccc',
        }
      },
      textStyle: {
        fontSize: transformFontSize(12),
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      grid: {
        left: '0%',
        top: '10%',
        bottom: '0%',
        containLabel: true,
        right: '20%'
      },
      xAxis: {
        type: 'value',
        show: false,
        axisLabel: {
          fontSize: transformFontSize(12)
        },
      },
      yAxis: {
        inverse: true,
        type: 'category',
        data: WorkshopCarbonEmissionsX,
        axisLabel: {
          fontSize: transformFontSize(12),
          color: '#fff'
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      series: [
        {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
              offset: 1, color: '#1679d1' // 0% 处的颜色
            }, {
              offset: 0, color: '#60f8ff' // 100% 处的颜色
            }],
            global: false // 缺省为 false
          },
          name: '碳排放',
          type: 'bar',
          itemStyle: {
            borderRadius: [6, 6, 6, 6] // 这里设置圆角的大小
          },
          label: {
            color: '#00E6FF',
            show: true,
            position: 'right'
          },
          emphasis: {
            focus: 'series'
          },
          data: WorkshopCarbonEmissionsY,
          barWidth: '40%',
        }
      ]
    };

    // 各厂房碳排放占比-----------------
    let myChart5 = echarts.init(document.querySelector('.box5'))
    let option5 = {
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 1, color: '#D9D252' // 0% 处的颜色
          }, {
            offset: 0, color: '#C16214' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 1, color: '#3C7DDF' // 0% 处的颜色
          }, {
            offset: 0, color: '#4B3ED9' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#20987C' // 0% 处的颜色
          }, {
            offset: 1, color: '#25E3B6' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#CF5151' // 0% 处的颜色
          }, {
            offset: 1, color: '#EA7575' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#1679D1' // 0% 处的颜色
          }, {
            offset: 1, color: '#60F8FF' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#B8C03D' // 0% 处的颜色
          }, {
            offset: 1, color: '#E7EC8C' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
      ],
      legend: {
        orient: 'vertical',
        right: '3%',
        top: 'center',
        itemGap: 5,
        itemWidth: 10,
        itemHeight: 5,
        top: 5,
        right: 0,
        textStyle: {
          color: '#fff',
          fontSize: transformFontSize(16),
        }
      },
      textStyle: {
        fontSize: transformFontSize(12),
      },
      tooltip: {
        trigger: 'item'
      },
      label: {
        color: "#00E6FF",
        alignTo: 'edge',
        // formatter: '{name|{b}}\n{time|{c} {d}% }',
        formatter: '{name|{b}}\n{time|{d}% }',
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        rich: {
          time: {
            fontSize: 10,
            color: '#999'
          }
        }
      },
      series: [
        {
          name: '厂房碳排放',
          type: 'pie',
          radius: '50%',
          data: FactoryCarbonEmissionsData,
          label: {
            show: true
          },
          center: ['40%', '50%'],
          radius: [0, '55%'],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
            }
          }
        }
      ]
    };

    // 各厂房碳排放占比-----------------
    let myChart6 = echarts.init(document.querySelector('.box6'))
    let option6 = {
      label: {
        color: "#00E6FF",
        alignTo: 'edge',
        formatter: '{name|{b}}\n{time|{d}%}',
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        rich: {
          time: {
            fontSize: 10,
            color: '#999'
          }
        }
      },
      title: {
        text: '单位：万吨',
        top: '5%',
        left: '5%',
        textStyle: {
          fontSize: transformFontSize(14),
          color: '#ccc',
        }
      },
      color: [
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 1, color: '#D9D252' // 0% 处的颜色
          }, {
            offset: 0, color: '#C16214' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 1, color: '#3C7DDF' // 0% 处的颜色
          }, {
            offset: 0, color: '#4B3ED9' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#20987C' // 0% 处的颜色
          }, {
            offset: 1, color: '#25E3B6' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#CF5151' // 0% 处的颜色
          }, {
            offset: 1, color: '#EA7575' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#1679D1' // 0% 处的颜色
          }, {
            offset: 1, color: '#60F8FF' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: '#B8C03D' // 0% 处的颜色
          }, {
            offset: 1, color: '#E7EC8C' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
      ],
      legend: {
        left: 'center',
        bottom: '3%',
        itemGap: 5,
        itemWidth: 10,
        itemHeight: 5,
        textStyle: {
          color: '#fff',
          fontSize: transformFontSize(16),
        }
      },
      textStyle: {
        fontSize: transformFontSize(12),
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '厂房碳排放',
          type: 'pie',
          radius: '50%',
          data: MonthCarbonEmissionsData,
          label: {
            show: true,
            // position: 'center'
          },
          center: ['50%', '50%'],
          radius: ['30%', '70%'],
          emphasis: {
            label: {
              show: true,
              fontSize: transformFontSize(16),
              fontWeight: 'bold'
            }
          },
        }
      ]
    };

    // 月碳排放分析同步当前日期
    option2.series[1].data = MonthlyCarbonEmissionAnalysisY3.slice(0, new Date().getDate())



    // 设置echarts---------------------------------
    myChart2.setOption(option2)
    myChart3.setOption(option3)
    myChart4.setOption(option4)
    myChart5.setOption(option5)
    myChart6.setOption(option6)
    



    // echarts跟随屏幕变化而适配-----------------------
    window.addEventListener("resize", function () {
      myChart2.resize()
      myChart3.resize()
      myChart4.resize()
      myChart5.resize()
      myChart6.resize()
    })

  </script>
</body>

</html>